<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>d3.js环形进度条</title>
		<style type="text/css">
				body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;

}

.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}

.chart-container{
    padding:25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.1) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.1) );
}

		</style>
	
	</head>
	<body>
		<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div class="widget">
    <div class="header">Progress Status</div>
    <div id="chart" class="chart-container">

    </div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var percent = 55;

var pie = d3.layout.pie()
  .value(function(d) {
    return d
  })
  .sort(null);

var w = 300,
  h = 320;

var outerRadius = (w / 2) - 10;
var innerRadius = outerRadius - 8;

var color = ['#ec1561', '#2a3a46', '#202b33'];

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0)
  .endAngle(2 * Math.PI);

//The circle is following this
var arcDummy = d3.svg.arc()
  .innerRadius((outerRadius - innerRadius) / 2 + innerRadius)
  .outerRadius((outerRadius - innerRadius) / 2 + innerRadius)
  .startAngle(0);

var arcLine = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0);

var svg = d3.select("#chart")
  .append("svg")
  .attr({
    width: w,
    height: h,
    class: 'shadow'
  }).append('g')
  .attr({
    transform: 'translate(' + w / 2 + ',' + h / 2 + ')'
  });

//background
var path = svg.append('path')
  .attr({
    d: arc
  })
  .style({
    fill: color[1]
  });

var pathForeground = svg.append('path')
  .datum({
    endAngle: 0
  })
  .attr({
    d: arcLine
  })
  .style({
    fill: color[0]
  });

//Dummy Arc for Circle
var pathDummy = svg.append('path')
  .datum({
    endAngle: 0
  })
  .attr({
    d: arcDummy
  }).style({
    fill: color[0]
  });

var endCircle = svg.append('circle')
  .attr({
    r: 12,
    transform: 'translate(0,' + (-outerRadius + 15) + ')'
  })
  .style({
    stroke: color[0],
    'stroke-width': 8,
    fill: color[2]
  });

var middleTextCount = svg.append('text')
  .datum(0)
  .text(function(d) {
    return d + '%';
  })

.attr({
    class: 'middleText',
    'text-anchor': 'middle',
    dy: 25,
    dx: 0
  })
  .style({
    fill: '#ec1561',
    'font-size': '80px'

  });

var arcTweenOld = function(transition, percent, oldValue) {
  transition.attrTween("d", function(d) {

    var newAngle = (percent / 100) * (2 * Math.PI);

    var interpolate = d3.interpolate(d.endAngle, newAngle);

    var interpolateCount = d3.interpolate(oldValue, percent);

    return function(t) {
      d.endAngle = interpolate(t);
      var pathForegroundCircle = arcLine(d);

      middleTextCount.text(Math.floor(interpolateCount(t)) + '%');

      var pathDummyCircle = arcDummy(d);
      var coordinate = pathDummyCircle.split("L")[1].split("A")[0];

      endCircle.attr('transform', 'translate(' + coordinate + ')');

      return pathForegroundCircle;
    };
  });
};

var oldValue = 0;

var animate = function() {
  pathForeground.transition()
    .duration(750)
    .ease('cubic')
    .call(arcTweenOld, percent, oldValue);

  oldValue = percent;
  percent = (Math.random() * 60) + 20;
  setTimeout(animate, 3000);
};

setTimeout(animate, 0);
</script>
	</body>
</html>
